@extends('layouts.default')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('css/eleui-theme-chalk.css')}}">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .mineMsgErrClass{
            background: #F56C6C;
            border-color:#f56c6c;
            color:#fff;
        }
    </style>
@stop


@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">酒店管理/ <a class="text-primary" href="{{url('admin/hotel/index')}}">酒店列表</a>/酒店商品管理</h3>
                </div>
                <div class="row">
                </div>
            @include('layouts.message')
            <!-- /.card-header -->
                <div class="card-body" id = "goods">
                    @verbatim
                        <el-tabs v-model="tab"  type="card">
                            <el-tab-pane label="在售商品" name="1">
                                <template>
                                    <el-table
                                            v-loading="loading.tab1"
                                            element-loading-text="拼命加载中"
                                            element-loading-spinner="el-icon-loading"
                                            element-loading-background="rgba(0, 0, 0, 0.35)"
                                            :data="tableData"
                                            border
                                            style="width: 100%">
                                        <el-table-column
                                                prop="goods_id"
                                                label="商品id"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="goods_name"
                                                label="商品名称"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                label="商品图片"
                                                width="180">
                                            <template slot-scope="scope">
                                                <img :src="scope.row.image" alt="" style="width:100px!important;">
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="price"
                                                label="原价">
                                        </el-table-column>
                                        <el-table-column
                                                prop = 'discount_price'
                                                label="折扣价">
                                        </el-table-column>
                                        <el-table-column
                                                prop="hotel_stock"
                                                label="酒店库存">
                                        </el-table-column>
                                        <el-table-column
                                                label="操作">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary" @click="click_modify_stock(scope.row)">调整库存</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-tab-pane>

                            <el-tab-pane label="停售商品" name="0">
                                <template>
                                    <el-table
                                            v-loading="loading.tab2"
                                            element-loading-text="拼命加载中"
                                            element-loading-spinner="el-icon-loading"
                                            element-loading-background="rgba(0, 0, 0, 0.35)"
                                            :data="tabeleData_2"
                                            border
                                            style="width: 100%">
                                        <el-table-column
                                                prop="goods_id"
                                                label="商品id"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="goods_name"
                                                label="商品名称"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                label="商品图片"
                                                width="180">
                                            <template slot-scope="scope">
                                                <img :src="scope.row.image" alt="" style="width:100px!important;">
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="price"
                                                label="原价">
                                        </el-table-column>
                                        <el-table-column
                                                prop = 'discount_price'
                                                label="折扣价">
                                        </el-table-column>
                                        <el-table-column
                                                prop="hotel_stock"
                                                label="酒店库存">
                                        </el-table-column>
                                        <el-table-column
                                                label="操作">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary" @click="click_modify_stock(scope.row)">调整库存</el-button>
                                                <el-button size="mini" type="danger" @click="click_del_button(scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-tab-pane>

                        </el-tabs>


                        <el-dialog width="30%" title="调整库存" :visible.sync="form_dialog.visible">
                            <span style="color:red">
                                (注：此库存为酒店库存，只可减少不可增加，调整只适用于货物丢失损坏等不可恢复的异常情况，如需增加库存或更多操作，请到‘商品管理->商品列表->分配酒店库存’列表中操作。)
                            </span>
                            <el-form :model="form_dialog.form">
                                <el-form-item label="库存" :label-width="'100px'">
                                    <el-input-number v-model="search.stock" @change="handleChange" :min="stock_operate.min" :max="stock_operate.max" label="描述文字"></el-input-number>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="confirm_update_stock">确 定</el-button>
                            </div>
                        </el-dialog>
                    @endverbatim
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>


@stop

@section('script')
    <script type="text/javascript" src="{{asset('js/vue.min.js')}}"></script>
    <script src="{{asset('js/axios.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/element-ui.js')}}"></script>

    <script>
        //开启调试模式
        Vue.config.devtools = true;
        let req_url = {
            hotelGoods : "{{url('api/hotel/hotel_goods_list')}}", //酒店商品列表
            update_stock_specially:"{{url('api/hotel/update_stock_specially')}}",//酒店商品库存的更新
            delete_goods:"{{url('api/hotel/delete_goods')}}",//酒店商品的删除
        };
        let service = axios.create({
            timeout:5000,
            headers:{
                'Content-Type': 'application/json;charset=UTF-8'
            },
        });

        new Vue({
            el:"#goods",
            created(){
                this.apiHotelGoodsList();
            },
            data(){
                return {
                    search : {
                        is_on_sale : "1",
                        hotel_id   : '{{$hotel_id}}',
                        goods_id   : 0,
                        stock : 0,
                    },
                    stock_operate:{
                      num : 0,
                      min : 0,
                      max : 0,
                    },
                    form_dialog : {
                      visible : false,
                      form : {
                          stock : 0,
                      }
                    },
                    loading:{
                        tab1:false,
                        tab2:false,
                    },
                    tableData: [],
                    tabeleData_2:[],
                    tab:'1',

                }
            },
            methods:{
                //点击调整库存按钮
                click_modify_stock(row){
                    this.stock_operate.max = parseInt(row.hotel_stock);
                    this.search.stock = parseInt(row.hotel_stock);
                    this.search.goods_id = row.goods_id;
                    this.form_dialog.visible = true;
                },
                handleChange(value) {
                    console.log(value);
                },
                //拉取酒店商品列表
                apiHotelGoodsList(){
                    var that = this;
                    this.loading_start('tab1');
                    this.loading_start('tab2');
                    service.post(req_url.hotelGoods,this.search)
                        .then(function (res) {
                            that.loading_end('tab1');
                            that.tableData = res.data.data;
                        });

                    service.post(req_url.hotelGoods,{
                        hotel_id : this.search.hotel_id,
                        is_on_sale: this.is_on_sale == 0 ? 1 : 0,
                    })
                        .then(function (res) {
                            that.loading_end('tab2');
                            that.tabeleData_2 = res.data.data;
                        })
                },

                //update_stock
                api_update_stock(){
                    var that = this;
                    this.loading_start('tab1');
                    this.loading_start('tab2');
                    service.post(req_url.update_stock_specially,this.search)
                        .then(function(res){
                            that.apiHotelGoodsList();
                            let res_data = res.data;
                            if(res_data.ret == 200){
                                that.$message.success(res_data.msg);
                            }else{
                                that.$message.error(res_data.msg);
                            }
                        })
                },

                api_delete_goods(){
                    var that = this;
                    this.loading_start('tab1');
                    this.loading_start('tab2');
                    service.post(req_url.delete_goods,this.search)
                        .then(function(res){
                            that.apiHotelGoodsList();
                            let res_data = res.data;
                            if(res_data.ret == 200){
                                that.$message.success(res_data.msg);
                            }else{
                                that.$message.error(res_data.msg);
                            }
                            })
                },

                confirm_update_stock(){
                  this.form_dialog.visible = false;
                  this.api_update_stock();
                },

                click_del_button(row){
                    var that = this;
                    this.search.goods_id = row.goods_id;
                    this.$confirm('确认要删除该酒店下的商品吗?','提示',{
                        type : 'warning'
                    })
                        .then(function(){
                          that.api_delete_goods();
                        });
                },

                loading_start(ele){
                    this.loading[ele] = true;
                },
                loading_end(ele){
                    this.loading[ele] = false;
                },
            },

        })

    </script>
@stop